<template>
	<div class="main">
		<div class="charge-header co-white">
			<div class="ft-28">余额</div>
			<div class="ft-72">¥125.24</div>
		</div>
		<div class="charge-list dis-flex ft-28">
			<div class="charge-item checked">20元</div>
			<div class="charge-item ml-28">50元</div>
			<div class="charge-item ml-28">100元</div>
			<div class="charge-item mt-28">500元</div>
			<div class="charge-item ml-28 mt-28">1000元</div>
			<div class="charge-item ml-28 mt-28">自定义</div>
		</div>
		<div class="charge-type">
			<div class="charge-title ft-28">选择充值渠道</div>
			<div class="charge-type-list ft-30">
				<div class="charge-type-item dis-flex align-center" @click="changetype(0)">
					<i class="charge-type-icon"></i>
					<div class="flex-1">微信支付</div>
					<div :class="'radio-div '+(payType==0?' checked':'')"></div>
				</div>
				<div class="charge-type-item dis-flex align-center"  @click="changetype(1)">
					<i class="charge-type-icon"></i>
					<div class="flex-1">支付宝支付</div>
					<div :class="'radio-div '+(payType==1?' checked':'')"></div>
				</div>
				<div class="charge-type-item dis-flex align-center"  @click="changetype(2)">
					<i class="charge-type-icon"></i>
					<div class="flex-1">银行卡转账</div>
					<div :class="'radio-div '+(payType==2?' checked':'')"></div>
				</div>
			</div>
		</div>
		<div class="bottom-div t-c">
			<div class="ft-24">充值金额不可提现，只能用于竞猜，中奖后可提现</div>
			<div class="mt-40">
				<a class="btn btn-red btn-circle btn-recharge">去充值</a>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data(){
			return{
				payType:0
			}
		},
		methods:{
			changetype(type){
				this.payType=type;
			}
		}
	}
</script>
<style scoped lang="scss">
	@import '@/css/base.scss';
	.main{overflow: hidden;}
	.charge-header{width: 688px;height: 232px;margin:8px auto;padding:52px 54px;box-sizing:border-box;background-image: linear-gradient(45deg, #5105A7 0%, #5C0BAD 100%);border-radius: 10px;}

	.charge-list{margin-top: 50px;flex-wrap: wrap;justify-content: center;}
	.charge-item{width: 204px;height: 100px;line-height: 100px;border: 1px solid #E2E2E2;text-align: center;}
	.charge-item.checked{background: #F1E9FF;border: 1px solid #833BFF;}
	.charge-type{margin: 50px 40px;padding-top: 32px;border-top: 1px solid transparent; 
  border-image: svg(1px-border param(--color #F5F5F5)) 2 2 stretch;border-bottom:0;}


  	.charge-title{height: 40px; line-height: 40px;color: #958DA5;}

  	.charge-type-item{height: 48px;line-height: 48px;margin-top: 40px;}

  	.radio-div{position: relative;width: 28px;height: 28px;border: 1px solid #E2E2E2;border-radius: 50%;}
  	.radio-div.checked{border: 1px solid #5ABC43;}
  	.radio-div.checked:after{content: " ";
    position: absolute;
    left: 8px;
    top: 50%;
    height: 20px;
    width: 10px;
    transform: rotateZ(45deg);
    margin-top: -14px;
	border-right: .267vw solid #5abc43;
    border-bottom: .267vw solid #5abc43;}

  	.bottom-div{position: fixed;bottom:0;width: 100%;padding-bottom: 20px;}

  	.btn-recharge{width: 540px;height: 84px;line-height: 84px;padding: 0;}
</style>